<template>
  <div id="communication">
    <el-container>
      <div class="left_side">
        <div class="left_msg">
          <el-avatar style="width:45px;height:45px;vertical-align:top" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <div class="lm_content">小青蛙</div>
          <el-button  size="mini" type="text" plain circle icon="el-icon-delete" style="float:right;margin-top:12px"></el-button>
          <el-divider></el-divider>
        </div>

        <div class="left_msg">
          <el-avatar style="width:45px;height:45px;vertical-align:top" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <div class="lm_content">小蜻蜓</div>
          <el-button  size="mini" type="text" plain circle icon="el-icon-delete" style="float:right;margin-top:12px"></el-button>
          <el-divider></el-divider>
        </div>

      </div>
      <div class="right_side">
        <div style="height:20px;width:578px;border-bottom: 1px solid #ddd"></div>
        <div class="communication_panel">
          <div class="communication_msg">
            <div style="clear:both;">
              <el-avatar class="user_av" style="width:45px;height:45px;vertical-align:bottom" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              <div class="msg_con">你好呀
              </div>
            </div>
            <div style="clear: both">
              <el-avatar class="user_av" style="width:45px;height:45px;vertical-align:bottom;float:right;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              <div class="msg_con" style="float:right;">你好呀
              </div>
            </div>
            <div style="clear: both">
              <el-avatar class="user_av" style="width:45px;height:45px;vertical-align:bottom" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              <div class="msg_con">今天学习了吗
              </div>
            </div>
            <div style="clear: both">
              <el-avatar class="user_av" style="width:45px;height:45px;vertical-align:bottom;float:right;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              <div class="msg_con" style="float:right;">学习了，你呢
              </div>
            </div>
          </div>
          <div class="send">
            <el-form ref="form" :model="form">
                <el-form-item>
                  <el-input type="textarea"  v-model="form.sendMsg"></el-input>
                </el-form-item>
            </el-form>
            <el-button icon="el-icon-s-promotion" style="float:right;position: relative;top:-15px;" type="primary" size="small">发送</el-button>
          </div>
        </div>
      </div>

    </el-container>
  </div>
</template>

<script>
export default {
  name: "Communication",
  data(){
    return{
      form: {
        sendMsg: ''
      }
    }
  }
}
</script>

<style scoped>
#communication {
  background-color: white;
  box-shadow: 0 5px 5px 0 #eceaea;
  min-height: 502px;
  overflow: hidden;
}
.left_side{
  width:235px;
  height:502px;
  border-right: 1px solid #eceaea;
  overflow-y:scroll;
  overflow-x:hidden;
}
.left_msg{
  padding:10px;
  height:45px;
  cursor: pointer;
}
.left_msg:hover{
  background-color:#eceaea;
}
.lm_content{
  display: inline-block;
  height:45px;
  line-height:45px;
  font-size:16px;
  margin-left:15px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  margin:5px 0;
}
.communication_content{
  padding:20px;
  width:538px;
  overflow-y:scroll;
  overflow-x:hidden;
  height:448px;
}
.sys_msg{
  margin-bottom:20px;
}
.sys_msg_content{
  color: #333333;
  font-size:14px;
}
.sys_msg_date{
  color:#aaa;
  font-weight: 400;
  text-align: right;
  margin-bottom: 20px;
}
.communication_panel{
  padding:0 20px 20px;
  width:538px;
  height:458px;
}
.msg_con{
  display: inline-block;
  word-wrap:break-word;
  word-break:break-all;
  width:300px;
  float:left;
  margin: 0 10px 10px;
  background-color: #ebf8f5;
  color:#666;
  padding:10px;
}
.user_av{
  float:left;
}
.communication_msg{
  padding-top:10px;
  height:290px;
  overflow-y: scroll;
  width:558px;
}
.send{
  padding-top:20px;
}
/deep/ .el-textarea__inner{
  resize:none;
  height:110px;
}
.el-form{
  margin-bottom: 15px;
}
</style>